<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app4">
        <display></display>
        <increment></increment>
    </div>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script>
//兄弟组件的传递方式
//有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线
//流程和父子类似，仅仅是多了一个中央时间总线
var bus = new Vue();
Vue.component('increment',{
    template : '<button v-on:click="add">+</button>',
    data : function () {
        return {count : 0}
    },
    methods : {
        add : function () {
            bus.$emit('inc', this.count += 1);
        }
    }
});


Vue.component('display',{
    template : '<span>clicked : <mark>{{c}}</mark> times</span>',
    data : function () {
        return {c : 0}
    },
    created : function () {//created 这个钩子在实例被创建之后被调用
        //箭头函数（es6），返回一个绑定当前执行上下文中的this，而且这个this，不可再切换更改了
        //箭头函数让`var self = this`这种重新指定this的写法不再出现
        var self=this;
        // bus.$on('inc', function (num) {
        // self.c = num
        // });
        //箭头函数的使用代替上面的写法
        bus.$on('inc', (num) => this.c = num );

    }

});
var vm = new Vue({
    el : '#app4'
});
</script>
</html>